<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>谭明慧727：Tab选项卡</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: white;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    
    /* 工具类 */
    .tab-scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    .tab-scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    
    .whitespace-nowrap {
      white-space: nowrap;
    }
    
    /* Tab栏样式 */
    .sticky-header {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 10;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .relative-container {
      position: relative;
    }
    
    /* 菜单图标样式 */
    .tab-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 4.5rem;
      height: 2rem;
      cursor: pointer;
      transition: opacity 0.3s;
      z-index: 30;
      right: 0;
    }
    
    .tab-icon:hover {
      opacity: 0.8;
    }
    
    /* 固定的"推荐"Tab样式 */
    .fixed-recommend {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 20;
      display: none;
      background-color: white;
      padding: 0.75rem 1rem;
      color: #000000; /* 默认非激活状态颜色 */
      font-weight: 500;
      border-bottom: 2px solid transparent; /* 默认无下划线 */
    }
    
    .fixed-recommend.active {
      color: #ef4444; /* 激活状态颜色 */
      border-bottom: 2px solid #ef4444; /* 激活状态下划线 */
    }
    
    /* 可滚动的Tab容器 */
    .tab-container {
      display: flex;
      overflow-x: auto;
    }
    
    /* Tab项样式 */
    .tab-item {
      padding: 0.75rem 1rem;
      color: #000000;
      transition: all 0.2s;
    }
    
    .tab-item.active {
      color: #ef4444;
      font-weight: 500;
      border-bottom: 2px solid #ef4444;
    }
    
    /* 内容区域样式 */
    .content-area {
      padding: 1rem;
      min-height: calc(100vh - 56px);
    }
    
    .content-text {
      margin: 0;
    }
    
    /* 图片页面新增样式 */
    .container {
      width: 90%;
      max-width: 500px;
      margin: 20px auto;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .item {
      width: 100%;
      margin-bottom: 0;
      border-bottom: 1px solid #eee;
    }
    .item:last-child {
      border-bottom: none;
    }
    .img {
      width: 100%;
      height: auto;
      display: block;
    }
    .content {
      padding: 15px;
    }
    .title {
      font-size: 29px;
      color: #333;
      margin-bottom: 10px;
      font-weight: 400;
    }
    .source-time-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .source-time {
      font-size: 17px;
      color: #999;
      margin-bottom: 10px;
    }
    .more-dots {
      font-size: 30px;
      color: #999;
    }
  </style>
</head>
<body>
  <!-- Tab栏：直接全屏显示 -->
  <div class="sticky-header">
    <div class="relative-container">
      <!-- tab图标 - 靠容器右边定位 -->
      <img src="img/tab.jpg" alt="tab图标" class="tab-icon">
      <!-- 固定的"推荐"Tab -->
      <div class="fixed-recommend" id="fixedRecommend">推荐</div>
      <!-- 可滚动的Tab容器 -->
      <div class="tab-container tab-scrollbar-hide" id="tabContainer">
        <div class="tab-item whitespace-nowrap" data-index="0">关注</div>
        <div class="tab-item whitespace-nowrap active" data-index="1">推荐</div>
        <div class="tab-item whitespace-nowrap" data-index="2">热榜</div>
        <div class="tab-item whitespace-nowrap" data-index="3">大连</div>
        <div class="tab-item whitespace-nowrap" data-index="4">视频</div>
        <div class="tab-item whitespace-nowrap" data-index="5">图片</div>
        <div class="tab-item whitespace-nowrap" data-index="6">畅听</div>
        <div class="tab-item whitespace-nowrap" data-index="7">短剧</div>
        <div class="tab-item whitespace-nowrap" data-index="8">娱乐</div>
        <div class="tab-item whitespace-nowrap" data-index="9">科技</div>
        <div class="tab-item whitespace-nowrap" data-index="10">懂车帝</div>
        <div class="tab-item whitespace-nowrap" data-index="11">财经</div>
        <div class="tab-item whitespace-nowrap" data-index="12">军事</div>
        <div class="tab-item whitespace-nowrap" data-index="13">体育</div>
        <div class="tab-item whitespace-nowrap" data-index="14">国际</div>
        <div class="tab-item whitespace-nowrap" data-index="15">健康</div>
        <div class="tab-item whitespace-nowrap" data-index="16">幸福里</div>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content-area">
    <div id="recommend-content" class="content-section">
      <p class="content-text">当前选中：推荐</p>
    </div>
    <div id="image-content" class="content-section" style="display: none;">
      <div class="container">
        <div class="item">
          <img src="./img/story1.png" alt="沈阳游玩攻略" class="img">
          <div class="content">
            <h2 class="title">满足你的各种需求，宝藏沈阳游玩攻略来了！</h2>
            <div class="source-time-wrap">
              <p class="source-time">东北新闻网  21小时前</p>
              <span class="more-dots">...</span>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="./img/story2.png" alt="喜人奇妙夜2观后感" class="img">
          <div class="content">
            <h2 class="title">《喜人奇妙夜2》第二期上观后感，我心目中有两个满分</h2>
            <div class="source-time-wrap">
              <p class="source-time">娱娱鱼  2小时前</p>
              <span class="more-dots">...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const tabContainer = document.getElementById('tabContainer');
    const fixedRecommend = document.getElementById('fixedRecommend');
    const recommendTab = document.querySelector('.tab-item[data-index="1"]');
    const followTab = document.querySelector('.tab-item[data-index="0"]');
    const imageTab = document.querySelector('.tab-item[data-index="5"]'); // 图片Tab
    const recommendContent = document.getElementById('recommend-content');
    const imageContent = document.getElementById('image-content');
    let recommendOffset;

    // 初始化
    function init() {
      recommendOffset = recommendTab.offsetLeft;
      fixedRecommend.style.width = `${recommendTab.offsetWidth}px`;
      fixedRecommend.style.height = `${recommendTab.offsetHeight}px`;
    }
    window.addEventListener('load', init);
    window.addEventListener('resize', init);

    // 滚动监听
    tabContainer.addEventListener('scroll', () => {
      const currentScroll = tabContainer.scrollLeft;
      if (currentScroll >= recommendOffset) {
        fixedRecommend.style.display = 'block';
        tabContainer.style.paddingLeft = `${fixedRecommend.offsetWidth}px`;
        
        // 根据推荐Tab是否激活来设置固定Tab样式
        if (recommendTab.classList.contains('active')) {
          fixedRecommend.classList.add('active');
        } else {
          fixedRecommend.classList.remove('active');
        }
      } else {
        fixedRecommend.style.display = 'none';
        tabContainer.style.paddingLeft = '0';
      }
    });

    // Tab切换逻辑
    document.querySelectorAll('.tab-item').forEach(item => {
      item.addEventListener('click', () => {
        // 重置所有Tab样式
        document.querySelectorAll('.tab-item').forEach(tab => {
          tab.classList.remove('active');
        });
        
        // 重置固定推荐Tab样式
        fixedRecommend.classList.remove('active');
        
        // 设置当前Tab为激活状态
        item.classList.add('active');
        
        // 切换内容显示
        if (item === imageTab) {
          recommendContent.style.display = 'none';
          imageContent.style.display = 'block';
        } else {
          recommendContent.style.display = 'block';
          imageContent.style.display = 'none';
          // 更新内容显示
          document.querySelector('.content-text').textContent = `当前选中：${item.textContent}`;
        }

        // 处理关注Tab的特殊滚动逻辑
        if (item === followTab) {
          tabContainer.scrollTo({ left: 0, behavior: 'smooth' });
          fixedRecommend.style.display = 'none';
          tabContainer.style.paddingLeft = '0';
        } else {
          item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
          
          // 如果点击的不是推荐Tab，确保固定推荐Tab不显示为激活状态
          if (item !== recommendTab) {
            fixedRecommend.classList.remove('active');
          }
        }
      });
    });

    // 固定推荐Tab点击事件
    fixedRecommend.addEventListener('click', () => {
      // 重置所有Tab样式
      document.querySelectorAll('.tab-item').forEach(tab => {
        tab.classList.remove('active');
      });
      
      // 设置推荐Tab为激活状态
      recommendTab.classList.add('active');
      fixedRecommend.classList.add('active');
      
      // 显示推荐内容
      recommendContent.style.display = 'block';
      imageContent.style.display = 'none';
      // 更新内容显示
      document.querySelector('.content-text').textContent = '当前选中：推荐';
      
      // 滚动到推荐Tab位置
      recommendTab.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });
  </script>
</body>
</html>